<template>
	<view class="detail-content">
		<view class="banner-kong"></view>
		<view class="banner" :style="`background-image:url(${info.siteCover})`">
			<view class="nav">
				<image src="@/static/img/courseBuy/back.png" alt="" class="back" @tap="backHandle"></image>
				<text>场地详情</text>
				<text></text>
			</view>
			<view class="collect-row">
				<view class="collect-btn-row" @tap="">
					<image class="img" src="@/static/img/site/collect.png" alt=""></image>
					<text>收藏</text>
				</view>
				<text class="area-text">{{info.siteName}}</text>
				<view class="location">
					<image src="@/static/img/site/location.png" alt="" class="location-img"></image>
					<text>{{info.siteAddress}}</text>
				</view>
			</view>
		</view>
		<view class="summary">
			<view class="summary-title">
				<image src="@/static/img/pay/line.png" alt="" class="line"></image>
				<text>概览</text>
			</view>
			<view class="u-content">
				<u-parse :html="info.siteDetail" :tag-style="style"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
	import { API } from '../../config/myApi.js';
	export default {
		data() {
			return {
				isCollet: false,
				info: {},
				content: `
					<p>露从今夜白，月是故乡明,露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
					<p>露从今夜白，月是故乡明,露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`,
				style: {
					// 字符串的形式
					p: 'margin-top:24rpx',
					img: 'margin-top:34rpx'
				}
			}
		},
		onLoad(option) {
			console.log('kkkk',option)
			const id = option.id
			this.getDeatil(id)
		},
		methods: {
			getDeatil(id) {
				const pram = {
					id: id
				}
				API.getSiteDetail(pram).then(res=>{
					console.log('hhhhhh',res)
					if(res.code == 200) {
						const data = res.result;
						this.info = data;
						console.log('listststts',this.info)
					}
				})
			},
			//返回上一级页面
			backHandle() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-content {
		.banner {
			width: 100vw;
			height: 575rpx;
			background: #d9d9d9;
			position: fixed;
			top: 0;
			left: 0;

			.nav {
				width: 100vw;
				height: 140rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				.back {
					width: 18rpx;
					height: 32rpx;
					margin-left: 30rpx;
				}

				>text {
					font-size: 36rpx;
					color: #fff;
				}
			}

			.collect-row {
				width: 690rpx;
				background: #fff;
				position: absolute;
				bottom: -91rpx;
				left: 50%;
				transform: translateX(-50%);
				box-shadow: 2rpx 0 13rpx #E6E4E4;
				border-radius: 12rpx;
				padding: 20rpx 25rpx 50rpx 38rpx;
				display: flex;
				flex-direction: column;

				.collect-btn-row {
					margin-left: auto;
					display: flex;
					align-items: center;

					>.img {
						width: 28rpx;
						height: 27rpx;
						margin-top: 0px !important;
					}

					>text {
						font-size: 24rpx;
						color: #A1A1A1;
						margin-left: 9rpx;
					}
				}

				.area-text {
					font-size: 32rpx;
					font-weight: bold;
					color: #151515;
				}

				.location {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.location-img {
						width: 20rpx;
						height: 22rpx;
						margin-top: 0rpx !important;
					}

					>text {
						font-size: 24rpx;
						color: #8A8A8A;
						margin-left: 10rpx;
					}
				}
			}
		}

		.summary {
			margin-top: 128rpx;
			
			.summary-title {
				padding: 0rpx 30rpx;
				display: flex;
				align-items: center;
				.line {
					width: 9rpx !important;
					height: 30rpx !important;
					margin-top: 0rpx !important;
				z-index: -10;
				}

				>text {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					margin-left: 18rpx;
				}
			}

			.u-content {
				width: 100vw;
				background: #fff;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				margin-top: 18rpx;
				padding: 0rpx 58rpx 31rpx;
				overflow: hidden;
				z-index: -10;
				position: relative;
			}
		}

		.banner-kong {
			height: 575rpx;
			width: 100vw;
		}
	}
</style>
